<div th:replace="~{ app :: layout ('首页', ~{::#css}, ~{::#site_info}, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">
    <div id="css">
        <link href="vendor/aos/dist/aos.css" rel="stylesheet">
    </div>

    <div class="site-info text-center" id="site_info">
        <h1 class="site-title animate__animated animate__delay-4s animate__swing">边学边做</h1>
        <div id="typed-strings">
            <p class="site-subtitle lead text-muted">有想法就去做，努力将想法变成现实。</p>
        </div>
        <span class="site-subtitle lead text-muted" id="typed"></span>
    </div>

    <div class="features" id="main">
        <div class="feature">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center text-lg-left align-self-center">
                        <h3 class="feature-title">资源</h3>
                        <p class="lead text-muted">可以直接运行的小应用，便于学习</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="img/about/resources.png" alt="coding">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center text-lg-right order-1 order-lg-2 align-self-center">
                        <h3 class="feature-title">视频</h3>
                        <p class="lead text-muted">精心制作的视频合集，便于理解</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0 order-2 order-lg-1">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="img/about/videos.png" alt="design">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center text-lg-left align-self-center">
                        <h3 class="feature-title">文档</h3>
                        <p class="lead text-muted">成体系的文章合集，便于查阅</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="img/about/docs.png" alt="coding">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center text-lg-right order-1 order-lg-2 align-self-center">
                        <h3 class="feature-title">博客</h3>
                        <p class="lead text-muted">零散的所思所想，便于沉淀</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0 order-2 order-lg-1">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="img/about/posts.png" alt="life">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div id="js">
        <script src="js/typed.min.js"></script>
        <script src="vendor/aos/dist/aos.js"></script>
        <script>
            const options = {
                stringsElement: '#typed-strings',
                startDelay: 300,
                typeSpeed: 150
            };

            new Typed("#typed", options);

            AOS.init({
                duration: 1000,
                delay: 100,
            });
        </script>
    </div>
</div>
